<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>QQ列表案例</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    ul,h2{margin: 0;padding: 0;}
    li{list-style: none;}
   	#box{width: 250px;height: 550px;margin: 50px auto 0;border: 1px solid #000;}
   	#box h2{background: url(images/ico1.gif) no-repeat 5px center #66FFFF; color:#000;;text-indent: 20px;height: 30px;line-height: 30px;}
   	#box .active{background: url(images/ico2.gif) no-repeat 5px center #FFFF99;}
   	#box ul{display: none;}
   	#box ul li{text-indent: 25px;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
    	var Box = document.getElementById('box');
    	var H2 = Box.getElementsByTagName('h2');
    	var Ul = Box.getElementsByTagName('ul');
    	var aUl = "";
    	var arr_li = [];
    	for(var i = 0;i < H2.length;i++){
    		H2[i].index = i;
    		H2[i].onclick = function(){
    			for(var i = 0;i < Ul.length;i++){
    				if(i != this.index){
	    				Ul[i].style.display = "none";
	    				H2[i].className = "";
    				}
    			}
    			if(this.className == ""){
	    			Ul[this.index].style.display = "block";
	    			this.className = "active";
	    		}else{
	    			Ul[this.index].style.display = "none";
	    			this.className = "";
	    		} 	
    		}
    	}
    	for(var i = 0;i < Ul.length;i++){
    		aUl = Ul[i].getElementsByTagName('li');
    		for(var j = 0;j < aUl.length;j++){
    			arr_li.push(aUl[j]);
    		}
    	}
    	for(var i = 0;i < arr_li.length;i++){
    		arr_li[i].onclick = function (){
    			for(var i = 0;i < arr_li.length;i++){
    				arr_li[i].style.background = "";
    			}
    			this.style.background = "#D82193";
    		}
    	}
    }
  </script>
</head>
<body>
 	<ul id="box">
 		<li class="list">
 			<h2>我的好友</h2>
 			<ul>
 				<li>凌老大</li>
 				<li>唐二</li>
 				<li>张三</li>
 				<li>李四</li>
 				<li>王五</li>
 				<li>朱六</li>
 				<li>卓七</li>
 			</ul>
 		</li>
 		<li>
 			<h2>我的同事</h2>
 			<ul>
 				<li>凌老大</li>
 				<li>唐二</li>
 				<li>张三</li>
 				<li>李四</li>
 				<li>王五</li>
 				<li>朱六</li>
 				<li>卓七</li>
 			</ul>
 		</li>
 		<li>
 			<h2>黑名单</h2>
 			<ul>
 				<li>凌老大</li>
 				<li>唐二</li>
 				<li>张三</li>
 				<li>李四</li>
 				<li>王五</li>
 				<li>朱六</li>
 				<li>卓七</li>
 			</ul>
 		</li>
 	</ul>
</body>
</html>